@import './variable.scss';

// 隐藏百度图标
.anchorBL {
  display: none;
}

// 显示缩放工具栏
.BMap_scaleCtrl.anchorBL {
  display: block;
}

.BMapLib_Drawing_panel{
  border-radius: px(5);
  // height: 5vh;
  height: px(40);
  // top: 200px;

  .BMapLib_tools {
    // position: relative;
  }
  .BMapLib_tools_hover {
    // position: absolute;
    background-color: #c7e8ff;
    .tools-dropdown-content{
      display: block !important; 
      background-color: #e1e1e1;
      box-shadow: 0px px(8) px(16) 0px rgba(0,0,0,0.2);
      top: px(42);
      left: 0;
      z-index: inherit;
      width: max-content;
      // border: 1px solid gray;
      border-radius: px(5);
    }
    .tools-dropdown-content div {
      display: flex;
      flex-wrap: nowrap;
      padding: px(10);
      &:hover{
        background-color: #c7e8ff
      }
    }
  }
}


.cluster-text-icon{
  background-repeat:no-repeat;
  background-size:100% 100%;
  -moz-background-size:100% 100%;
  &.video{
    background-image: url('/static/bmap/images/camera.png');
  }
  &.user{
    background-image: url('/static/bmap/images/location.png');
    color: #000 !important;
  }
  &.warning{
    background-image: url('/static/bmap/images/warning.png');
    color: #000 !important;
  }
  &.label{
    background-image: url('/static/bmap/images/label.png');
    color: #000 !important;
  }
  &.event{
    background-image: url('/static/bmap/images/significant_event.png');
    color: #000 !important;
  }
  
}

.custom-text-icon{
  background-repeat:no-repeat;
  background-size:100% 100%;
  -moz-background-size:100% 100%;

  &.video{
    background-image: url('/static/bmap/images/camera.png');
  }
  &.user,&.operator,&.employee{
    background-image: url('/static/bmap/images/location.png');
  }
  &.label{
    background-image: url('/static/bmap/images/label.png');
    color: #000 !important;
  }
  &.warning{
    background-image: url('/static/bmap/images/warning.png');
    color: #000 !important;
  }
  
  &.event.level-1{
    background-image: url('/static/bmap/images/common_event.png');
    color: #000 !important;
  }
  &.event.level-2{
    background-image: url('/static/bmap/images/larger_event.png');
    color: #000 !important;
  }
  &.event.level-3{
    background-image: url('/static/bmap/images/significant_event.png');
    color: #000 !important;
  }
  &.event.level-4{
    background-image: url('/static/bmap/images/special_evnet.png');
    color: #000 !important;
  }

  .circle1 {
    -webkit-animation: circle 3s linear infinite;
    animation: circle 3s linear infinite;
  }
  .circle2 {
    -webkit-animation: circle 3s linear 0.8s infinite;
    animation: circle 3s linear 0.8s infinite;
  }
  .circle3 {
    -webkit-animation: circle 3s linear 1.6s infinite;
    /* Safari and Chrome */
    animation: circle 3s linear 1.6s infinite;
  }

  .circle1,
  .circle2,
  .circle3 {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -#{px(10)} 0 0 -#{px(10)};
    width: px(20);
    height: px(20);
    border-radius: 50%;
    background-color: rgba(red, 0.5);
    opacity: 0;
  }

  @keyframes circle {
    /* Safari and Chrome */
    from {
      opacity: 1;
      -webkit-transform: scale(0);
    }
    to {
      opacity: 0;
      -webkit-transform: scale(5);
    }
  }

}


// 信息窗口
.infoBox{
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: center;

  .close-icon{
    width: px(20);
    height: px(20);
    z-index: 1;
  }

  
}

.custom-info-box{
  border-radius: px(5);

  .info-box-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(#228eb3, 0.7);
    border-radius: px(5) px(5) 0 0;

    .title {
      width: max-content;
      height: px(24);
      line-height: px(24);
      padding-left: px(5);
      border-radius: px(5) px(5) 0 0;
      color: #fff;
      font-size: px(16);
      font-weight: 400;
      font-style: oblique;
    }
    .close-icon{
      margin: 0 px(2) 0 px(5);
      cursor: pointer;
    }
  }

  .arrow_bottom{
    width: 0;
    height: 0;
    text-align: center;
    border-top: px(10) solid rgba(#101b22, 0.7);
    border-left: px(10) solid transparent;
    border-right: px(10) solid transparent;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
  }
  .arrow_bottom_small{
    width: 0;
    height: 0;
    text-align: center;
    border-top: px(5) solid rgba(#101b22, 0.7);
    border-left: px(5) solid transparent;
    border-right: px(5) solid transparent;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
  }

  &.tag{
    padding: px(3);
    white-space: nowrap;
    text-align: center;
    min-width: px(40);
    
    .tag_title{
      border-radius: px(5);
      background-color: gray;
      color: #fff;
      font-size: px(16);
      height: px(24);
      padding: 0 px(3);
    }
  }

  &.label{
    min-width: px(230);
    background-color: rgba(#101b22, 0.7);

    .label_body{
      padding: px(3);
      display: flex;
      flex-direction: row;
      .left{
        width: px(80);
        img{
          width: px(80);
          height: px(90)
        }
      }
      .right{
        margin-left: px(3);
        .right-item{
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          font-size: px(12);
          height: px(20);
          .prop{
            min-width: px(28);
            margin-right: px(10);
            color: skyblue;
            font-style: oblique;
          }
          .value{
            color: #fff;
          }
        }
      }
    }
  }


  &.sensor {
    min-width: px(200);
    .sensor_body{
      padding: px(3);
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
  
      .col-right {
        margin-left: px(5);
        // min-width: px(30);
      }
  
      .row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        margin: px(2) 0;
        min-width: px(60);
        div{
          white-space: nowrap;
        }
      }
  
      .label {
        width: px(30);
        color: skyblue;
        font-style: oblique;
        text-align: end;
        font-size: px(12);
      }
  
      .value {
        margin: 0 px(5);
        font-size: px(12);
      }
  
      .status {
        font-size: px(12);
  
        &.normal {
          background-color: #68c23a;
        }
  
        &.low-risk {
          background-color: #ce8b2f;
        }
  
        &.high-risk {
          background-color: red;
        }
      }
    }
  }

  &.fence{
    min-width: px(220);
    background-color: rgba(#101b22, 0.7);
    .fence_body{
      .flex{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        // align-items: center;
        width: max-content;
        font-size: px(14);
        padding: px(3) 0;
        margin-right: px(10);
        color: #fff;
        label{
          width: px(60);
          text-align: end;
        }
        input{
          font-size: px(14);
          background-color: #fff;
        }
      }
      .users{
        max-width: px(200);
        max-height: px(100);
        overflow-y: auto;
        white-space:normal;
        word-break:keep-all;
        word-wrap:break-word; 
      }
    }
    
    ::-webkit-scrollbar{
      width: px(10);
    }
    /* 垂直滚动条的滑动块 */
    ::-webkit-scrollbar-thumb:vertical {
      border-radius: px(4);
      background-color:#445f69;
      opacity: 1;
    }
     
    ::-webkit-scrollbar-track {
        border: 1px #d3d3d3 solid;
        box-shadow: 0 0 px(3) #dfdfdf inset;
        border-radius: px(10);
        background: #eee;
    }
    ::-webkit-scrollbar-thumb {
        border: 1px #808080 solid;
        border-radius: px(10);
        background: #999;
    }
  }

  &.warning{
    min-width: px(200);
    background-color: rgba(#101b22, 0.7);
    .warning_body{
      .flex{
        width: max-content;
        font-size: px(14);
        padding: 0 px(5);
        color: #fff;
      }
    }
  }

  &.operator{
    min-width: px(230);
    background-color: rgba(#101b22, 0.7);
    .operator_body{
      .flex{
        width: max-content;
        font-size: px(14);
        padding: 0 px(5);
        color: #fff;
        label{
          display: inline-block;
          width: px(50);
          text-align: end;
        }
      }
    }
  }
  &.employee{
    min-width: px(230);
    background-color: rgba(#101b22, 0.7);
    .employee_body{
      .flex{
        width: max-content;
        font-size: px(14);
        padding: 0 px(5);
        color: #fff;
        label{
          display: inline-block;
          width: px(50);
          text-align: end;
        }
      }
    }
  }
  &.event{
    min-width: px(230);
    background-color: rgba(#101b22, 0.7);

    .info-box-header{
      .envent-level{
        font-style: oblique;
      }
      .level-1{
        
        color: #13ce66;
      }
      .level-2{
        color: #666666;
      }
      .level-3{
        color: #FFA500;
      }
      .level-4{
        color: #FF3030;
      }
    }

    .event_body{
      .flex{
        width: max-content;
        font-size: px(14);
        padding: 0 px(5);
        color: #fff;
        label{
          display: inline-block;
          width: px(50);
          text-align: end;
        }
      }
    }
  }

  &.video{
    min-width: px(200);
    background-color: rgba(#101b22, 0.7);
    .video_body{
      .flex{
        width: max-content;
        font-size: px(14);
        padding: 0 px(5);
        color: #fff;
        label{
          display: inline-block;
          width: px(50);
          text-align: end;
        }
      }
    }
  }

  .info-box-footer{
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: px(5);
    margin-right: px(3);
    margin-top: px(10);
  }


  button{
    margin-left: px(5);
    background-color: rgba(#545b5d, 0.5);
    color: #fff;
    height: px(28);
    line-height: px(28);
    width: px(50);
    font-size: px(14);
    border-radius: px(5);
    padding: 0;
    margin: px(2) px(3);
    display: inline-block;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid #DCDFE6;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;

    &:hover {
      background-color: rgba(#31adcf, 0.5);
    }
  }
}




.person-dropdown-menu {
  background-color: rgba(#436068, 0.9);
  padding: px(10) 0;
  margin: px(5) 0;

  .el-dropdown-menu__item {
    height: px(30);
    line-height: px(30);
    padding: 0 px(20);
    font-size: px(16);
  }

  li {
    color: #fff;
  }

  .popper__arrow {
    &::after {
      border-top-color: rgba(#436068, 0.9) !important;
    }
  }
}


.drawing-tools-dropdown-menu{
  margin-top: 6px !important;
  padding: 0 ;
  .el-dropdown-menu__item{
    padding: 0 px(10);
    line-height: px(32);
    font-size: px(14);
  }
}

